<template>
	<!-- #ifdef APP-NVUE -->
	<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
		<slot />
	</refresh>
	<!-- #endif -->
	<!-- #ifndef APP-NVUE -->
	<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
		<slot />
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		name: 'UniRefresh',
		props: {
			display: {
				type: [String],
				default: "hide"
			}
		},
		data() {
			return {
				pulling: false
			}
		},
		computed: {
			isShow() {
				if (this.display === "show" || this.pulling === true) {
					return true;
				}
				return false;
			}
		},
		created() {},
		methods: {
			onchange(value) {
				this.pulling = value;
			},
			onrefresh(e) {
				this.$emit("refresh", e);
			},
			onpullingdown(e) {
				// #ifdef APP-NVUE
				this.$emit("pullingdown", e);
				// #endif
				// #ifndef APP-NVUE
				var detail = {
					viewHeight: 90,
					pullingDistance: e.height
				}
				this.$emit("pullingdown", detail);
				// #endif
			}
		}
	}
</script>

<style scoped>
	.uni-refresh {
		height: 0;
		overflow: hidden;
	}
</style>